<template>
  <v-app id="app">

    <v-app-bar
      app
      color="white"
      shrink-on-scroll
      scroll-target="#scrolling-techniques-2"
      height="74"
      light
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
        />
      </template>

      <v-toolbar-title class="headline text-uppercase noPadding">
        <v-img
          src="@/assets/files/cats.jpg"
          aspect-ratio="2.2"
          class="grey lighten-2"
        />
        <span class="logo">Nutschan</span>
        <span class="font-weight-light logo">.blog</span>
      </v-toolbar-title>

      <div class="flex-grow-1" />

      <v-spacer />
      <v-toolbar-items>
        <v-tabs
          v-model="menuNavTab"
          light
          height="70"
          slider-color="brown"
          align-with-title
          background-color="transparent"
        >
          <v-tab
            v-for="item in menuTabs"
            :key="item.id"
            @click="switchTab(item)"
          >
            {{ item.name }}
          </v-tab>
        </v-tabs>
      </v-toolbar-items>

      <v-menu
        right
        bottom
      >
        <template v-slot:activator="{ on }">
          <v-btn
            icon
            class="ma-auto"
            v-on="on"
          >
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item
            v-for="menu in moreMenu"
            :key="menu.name"
            @click="chooseMenu(menu.href)"
          >
            <v-list-item-title>{{ menu.name }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <v-btn
        color="blue lighten-2"
        dark
        class="ma-auto"
        @click="writeBlog"
      >
        <v-icon left>mdi-pencil-box-outline</v-icon>
        写博客
      </v-btn>
    </v-app-bar>

    <v-container
      id="scrolling-techniques-2"
      class="fill-height noPadding"
      fluid
    >
      <router-view />
      <Music />
    </v-container>
    <AppFooter />
  </v-app>
</template>

<script>
import '@/assets/css/business/appbar/appbar.scss'
import Music from '@/components/music/Aplayer.vue'
import AppFooter from '@/components/footer/AppFooter.vue'
import { mixin } from '@/utils/mixin'

export default {
  name: 'app',
  components: {
    Music,
    AppFooter
  },
  mixins: [mixin],
  props: {
    source: String
  },
  data: () => ({
    // drawer: false,
    menuTabs: [
      {
        id: 0,
        name: '首页',
        url: '/'
      },
      {
        id: 1,
        name: 'IT之道',
        url: '/CodeCareer'
      },
      {
        id: 2,
        name: '博客',
        url: '/blogHome'
      },
      {
        id: 3,
        name: '视野',
        url: '/frontThought'
      },
      {
        id: 4,
        name: '阅读',
        url: '/readOcean'
      },
      {
        id: 5,
        name: '留言板',
        url: '/messageBoard'
      }
    ],
    moreMenu: [
      { name: '友链', href: 'https://touduyu.com/?fr=qgroup' },
      {
        name: '高效搜罗',
        href: 'http://www.gaoxiaosouluo.cn/'
      },
      { name: '小酒馆', href: 'https://www.bilibili.com/' }, {
        name: '你我他',
        href: '/'
      }, {
        name: '关于我',
        href: '/'
      }]
  }),
  mounted() {
  },
  created() {
    /* // 在页面加载时读取sessionStorage
            if (this.$cookie.get('store')) {
                this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(this.$cookie.get('store'))))
            }
            // 在页面刷新时将store保存到sessionStorage里
            window.addEventListener('beforeunload', () => {
                this.$cookie.set('store', JSON.stringify(this.$store.state))
            });*/

  },
  methods: {
    switchTab: function(item) {
      this.$store.commit('setMenuNavTab', item.id)
      this.$router.push({
        path: item.url,
        query: {
          id: this.id
        }
      })
    },
    chooseMenu(href) {
      window.open(href, '_blank')
    },
    writeBlog() {
      // console.log("进入写博客界面");
      this.$go('/newBlog')
    }
  }
}
</script>

<style lang="scss">
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    #nav {
        padding: 30px;

        a {
            font-weight: bold;
            color: #2c3e50;

            &.router-link-exact-active {
                color: #42b983;
            }
        }
    }
</style>
